import React, { Component } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import moment from 'moment';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import FileReader from '@/components/FileReader';
import { formItemFragement, queryDict, formatPrice } from '@/utils/common';
import { allDictList, billStateOnlyReadList } from '@/utils/constans';
import {
  renderTableAdSelect,
  renderTableAdSearch,
  allDispatchType,
  formateNOSecond,
  allUrl,
} from './utils';

@connect(({ driverPaper, component, loading }) => ({
  driverPaperDetail: driverPaper.driverPaperDetail,
  dictObject: component.dictObject,
  searchValue: component.searchValue,
  loading: loading.effects[allDispatchType.detail],
}))
export default class DriverPaperDetail extends Component {
  state = {
    detailId: '',
  };

  componentDidMount() {
    const { id } = this.props;
    this.handleStateChange([{ detailId: id }]);
    this.selectDriverPaperDetail(id);
  }

  componentWillMount() {
    const allDict = [allDictList.papersType];
    queryDict({ props: this.props, allDict });
  }

  componentWillReceiveProps(nextProps) {
    const { id } = nextProps;
    if (this.props.id !== id) {
      this.handleStateChange([{ detailId: id }]);
      this.selectDriverPaperDetail(id);
    }
  }

  selectDriverPaperDetail = id => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.detail,
      payload: { id },
    });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  render() {
    const { loading, driverPaperDetail } = this.props;
    const { detailId } = this.state;
    const detail = driverPaperDetail[detailId] || {};
    const editPageParams = {
      panelTitle: ['基础信息'],
    };

    const formItem = [
      [
        <DetailPage label="单号" value={detail.papersNo} />,
        <DetailPage
          label="状态"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.billStatus || detail.status,
            data: billStateOnlyReadList,
          })}
        />,
      ],
      [
        <DetailPage label="司机" value={detail.driverName} />,
        <DetailPage label="所属公司" value={detail.mdsCompanyName} />,
      ],
      [
        <DetailPage
          label="证件类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.papersType,
            key: allDictList.papersType,
          })}
        />,
        <DetailPage label="证件编号" value={detail.papersNumber} />,
      ],
      [
        <DetailPage
          label="有效期"
          value={detail.expiryStartTime ? `${detail.expiryStartTime}~${detail.expiryEndTime}` : ''}
        />,
        <DetailPage label="费用" value={formatPrice(detail.feeCost)} />,
      ],
      [<DetailPage label="备注" value={detail.remarks} />],
      [
        <DetailPage
          label="附件"
          value={
            <FileReader
              value={detail.fileList || []}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
              urlType="tms"
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
      </EditPage>
    );
  }
}
